/**
 * 组件：用户信息组件
 * Author:Colin3dmax
 */
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import {
    StyleSheet,
    View,
    Text,
    Image,
    TouchableOpacity,
} from 'react-native';
import ImageButton from './../component/comp.image-button'

class PeopleInfoItem extends Component{

    static propTypes = {
        item:PropTypes.object,
        onPress:PropTypes.func,
    }

    static defaultProps = {

    }

    constructor(props){
        super(props)
        this.state={

        }
    }
    componentDidMount() {

    }

    genGenderUI() {
        const {gender} = this.props.item
        if (gender) {
            const genderUrl = gender == "male" ? require('../../img/gender_boy.png') : require('../../img/gender_girl.png');
            return (<Image style={styles.genderIcon} source={genderUrl}/>);
        }
    }

    render() {
        const {item,onPress} = this.props
        return (
            <TouchableOpacity style={styles.peopleInfoItemTouch} onPress={onPress}>
            <View  onPress={onPress} style={styles.peopleInfoItem}>
                <Image style={styles.headImg} source={item.headUrl}></Image>
                <ImageButton style={styles.playBtn} imageStyle={styles.playBtnImage} source={require('../../img/btn_small_play.png')}/>
                <View style={styles.peopleInfoBottom}>
                    <Text style={styles.nickName}>{item.nickName}</Text>
                    {this.genGenderUI()}
                    <Text style={styles.age}>{item.age}</Text>
                </View>
            </View>
            </TouchableOpacity>
        );
    }
}

const styles = StyleSheet.create({
    peopleInfoItemTouch:{
        flex: 1,
        margin:2,
        height: 183,
    },
    peopleInfoItem: {
        flex: 1,
        height: 183,
        borderRadius: 5,
        backgroundColor:'white',
        overflow:'hidden',
    },
    headImg:{
        flex:1,
        width:'100%',
        resizeMode: 'cover',
    },
    playBtn:{
        width:43,
        height:43,
        position:'absolute',
        right:8,
        bottom:20,
    },
    playBtnImage:{
        width:43,
        height:43,
    },
    peopleInfoBottom:{
        height:18,
        position:'absolute',
        left:0,
        right:0,
        bottom:0,
        backgroundColor:'rgba(0,0,0,0.43)',
        flexDirection:'row',
        alignItems:'center',
        paddingLeft:4,
        paddingRight:4,
        overflow:'hidden',
    },
    nickName:{
        color:'white',
        fontSize:12,
    },
    age:{
        color:'white',
        fontSize:12,
    },
    genderIcon: {
        width: 12,
        height: 12,
        marginLeft:2,
        marginRight:2,
    },
});

export default PeopleInfoItem;